<template lang="html" id="shou">
  <div class="shou">
    <div class="input">
      <span>登陆查看我的等级</span>
      <button type="button" name="button">登陆</button>
    </div>
    <div class="sou">
      <input type="text" name="" value="" placeholder="绝品透视">
      <img src="../../static/fang.png" alt="">
      <button type="button" name="button">搜索</button>
    </div>
    <div class="con-tou">
      <span>主编力荐</span>
    </div>
    <div class="xianshu">
      <div class="ne">
        <img src="../../static/x14.png"><br>
        床上有鬼
      </div>
      <div class="ne">
        <img src="../../static/x15.png"><br>
        大小姐的专...
      </div>
      <div class="ne">
        <img src="../../static/x16.png"><br>
        逍遥小神农
      </div>
    </div>
    <div class="con-tou">
      <span>青春都市</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x17.png"><br>
      </div>
      <div class="">
        <h3>心潮澎湃</h3>
        <p>武侠仙侠(全本)</p>
        <span>
          古界破碎，仙族没落；碎片飘零，衍化三千世界、五方荒域，神族随之崛起，逐鹿蛮
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>都市</span> | 医魂</li>
      <li><span>玄幻</span> | 以文成神</li>
      <li><span>都市</span> | 极品神医混花都</li>
      <li><span>都市</span> | 天才小污医</li>
    </ul>
    <div class="con-tou">
      <span>玄幻武侠</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x18.png"><br>
      </div>
      <div class="">
        <h3>全能法神</h3>
        <p>玄幻奇幻(连载中)</p>
        <span>
          这是个只有魔法的世界，108种符号排列组合，构成万千魔法。有冰雷火风的元素类魔
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>玄幻</span> | 战龙凌神</li>
      <li><span>仙侠</span> | 蜀山之战</li>
      <li><span>玄幻</span> | 无尽剑神</li>
      <li><span>玄幻</span> | 天机神王</li>
    </ul>
    <div class="con-tou">
      <span>科幻灵异</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x19.png"><br>
      </div>
      <div class="">
        <h3>我心狂野</h3>
        <p>都市言情(连载中)</p>
        <span>
          没有我解决不了的问题！如果一个红包解决不了，那么我会发两个红包，只要异界有的
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>科幻</span> | 人皮作坊</li>
      <li><span>科幻</span> | 死亡游戏</li>
      <li><span>科幻</span> | 魔鬼的游戏</li>
      <li><span>科幻</span> | 重生:末日我为王</li>
    </ul>
    <div class="con-tou">
      <span>历史军事</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x20.png"><br>
      </div>
      <div class="">
        <h3>大明海枭</h3>
        <p>历史军事(连载中)</p>
        <span>
          大明皇帝为他主婚，西班牙皇帝给他授勋，英国皇帝为他设宴，罗马教皇给他赐福......他
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>历史</span> | 奋斗在盛唐</li>
      <li><span>历史</span> | 铁血强宋</li>
      <li><span>历史</span> | 明朝好女婿</li>
      <li><span>历史</span> | 重生之大明摄政王</li>
    </ul>
    <div class="con-tou">
      <span>网游其他</span>
    </div>
    <div class="content">
      <div class="ne">
        <img src="../../static/x21.png"><br>
      </div>
      <div class="">
        <h3>神级大领主系统</h3>
        <p>都市言情(连载中)</p>
        <span>
          神级领主系统，无限攻略？一线女明星收为女仆，白宫奥总当我管家！在我的领域内，
        </span>
      </div>
    </div>
    <ul class="con-di">
      <li><span>网游</span> | 王者荣耀之极品主播</li>
      <li><span>网游</span> | 网游之霸主</li>
      <li><span>网游</span> | 网游之冒牌NPC</li>
      <li><span>网游</span> | 英雄联盟之野区争霸</li>
    </ul>
    <div class="sou">
      <input type="text" name="" value="" placeholder="网络那是真的卡">
      <img src="../../static/fang.png" alt="">
      <button type="button" name="button">搜索</button>
    </div>
    <div class="footer">
      <ul class="u1">
        <li>首页</li>
        <li>书架</li>
        <li>分类</li>
        <li>留言</li>
        <li>充值</li>
        <li>客户端</li>
      </ul>
      <ul class="u2">
        <li>普通版</li>
        <div></div>
        <li><span>触平版</span></li>
      </ul>
      <p><span>看书网</span> wap.kanshu.com</p>
    </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.shou {
    width: 100%;
    .input {
        width: 95%;
        height: 50px;
        line-height: 40px;
        margin: 10px auto;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        background: white;
        button {
            width: 80px;
            background: #E98110;
            color: white;
            border: 1px solid #E98110;
        }
    }
    .sou {
        width: 95%;
        height: 40px;
        margin: 10px auto 20px;
        position: relative;
        display: flex;
        justify-content: space-between;
        border: 1px solid #E98110;
        background: white;
        padding: 0 0 0 10px;
        input {
            outline: medium;
            border-style: none;
            width: 75%;
            height: 35px;
        }
        button {
            width: 25%;
            height: 38px;
            text-align: right;
            padding-right: 15px;
            background: #EEEE;
            border: 1px solid #EEE;
            color: #E98110;
        }
        img {
            position: absolute;
            left: 78%;
        }
    }
    .xianmian {
        width: 95%;
        height: 30px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        line-height: 30px;
        background: white;
        .z1 {
            font-size: 17px;
        }
        .z2 {
            font-size: 12px;
            color: #ccc;
        }
    }
    .xianshu {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding: 10px 0 20px;
        display: flex;
        justify-content: space-around;
        .ne {
            width: 30%;
            text-align: center;
            img {
                width: 80%;
                margin: 0 auto;
            }
        }
    }
    .con-tou {
        width: 95%;
        height: 30px;
        margin: 20px auto 0;
        padding: 0 10px;
        line-height: 30px;
        background: white;
        span {
            font-size: 17px;
        }
    }
    .con {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding: 10px 0 20px;
        display: flex;
        justify-content: space-around;
        .ne {
            width: 30%;
            text-align: center;
            img {
                width: 80%;
                margin: 0 auto;
            }
        }
    }
    .con-di {
        width: 95%;
        margin: 0 auto;
        background: white;
        padding-bottom: 20px;
        li {
            width: 95%;
            margin: 0 auto;
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dashed lightgrey;
            span {
                color: #E98110;
            }
        }
    }
    .content {
        width: 95%;
        padding: 10px;
        margin: 0 auto;
        background: white;
        display: flex;
        justify-content: space-around;
        .ne {
            margin-right: 10px;
        }
        p {
            font-size: 13px;
            color: #706e71;
        }
        span {
            color: #9a9897;
        }
    }
    .footer{
      width: 100%;
      background: #333333;
      color:#CCCCCC;
      .u1{
        width: 80%;
        margin:0 auto;
        height:40px;
        line-height: 40px;
        display: flex;
        justify-content: space-around;
      }
      .u2{
        width: 50%;
        margin:0 auto;
        height:30px;
        display: flex;
        justify-content: space-around;
        div{
          width:1px;
          margin-top:8px;
          height:15px;
          background: #CCC;
        }
        li{
          width: 30%;
          height:30px;
          text-align: center;
          line-height: 30px;
          span{
            color:#E98110;
          }
        }
      }
      p{
        width: 100%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        span{
          color:#E98110;
        }
      }
    }
}
</style>
